<template>
    <div>
      <header class="header">
        <div class="header-left">
          <el-button @click="$router.push('/student/dashboard')" icon="left" type="text" class="back-button">
            <img src="@/assets/svgs/left.svg" alt="Back" />
          </el-button>
          <span class="title">课堂质量实时反馈</span>
        </div>
      </header>
      <div class="feedback-card-list">
        <div v-for="feedback in feedbacks" :key="feedback.id" class="feedback-card">
          <div class="feedback-header">
            <img src="@/assets/svgs/feedback.svg" alt="反馈" class="feedback-icon" />
            <div class="feedback-title">第{{ feedback.id }}次反馈问卷</div>
          </div>
          <div class="blue-bar"></div>
          <div class="feedback-dates">开始时间：{{ formatDate(feedback.publishTime) }}</div>
          <el-button @click="$router.push('/student/suggestion/index')" class="write-button">填写反馈</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const feedbacks = ref([
    {
      id: 1,
      publishTime: new Date(),
      submittedCount: 5,
      totalCount: 30
    }
  ]);

  function formatDate(date) {
    const options = { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false };
    return new Intl.DateTimeFormat('zh-CN', options).format(date);
  }


  </script>
  
  <style>
  .template {
    background-color: #F9FAFB;
  }
  .header {
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    background-color: #13227a;
  }
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .back-button {
    color: white;
    border: none;
    width: 25px;
    height: 25px;
  }
  
  .title {
    font-size: 16px;
  }
  
  .header-right {
    display: flex;
  }
  
  .write-button {
    background-color: #13227a;
    border: none;
    color: white;
    width: 120px;
    height: 36px;
    border-radius: 4px;
    position: absolute;
    bottom: 16px;
    right: 16px;
  }
  
  .feedback-card-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
    padding: 0 40px;
  }
  
  .feedback-card {
    background-color: white;
    border: none;
    border-radius: 8px;
    padding: 16px;
    height: 180px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .feedback-title {
    font-weight: bold;
    color: black;
    font-size: 20px;
  }
  
  .feedback-dates {
    color: gray;
    font-size: 14px;
  }
  
  .feedback-submission {
    color: darkgray;
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .result-button {
    background-color: #13227a;
    color: white;
    margin-top: auto;
    align-self: flex-end;
  }
  
  .custom-message-box {
    width: 400px !important;
    padding: 30px 20px !important;
  }

  .custom-message-box .el-message-box__message {
    font-size: 16px !important;
    padding: 20px 0 !important;
  }

  .custom-message-box .custom-confirm-button {
    background-color: #13227a !important;
    border-color: #13227a !important;
  }

  .custom-message-box .el-message-box__btns button {
    font-size: 14px !important;
    padding: 12px 20px !important;
  }

  .blue-bar {
    height: 4px;
    width: 40px;
    background-color: #13227a;
    border-radius: 2px;
    margin: 8px 0;
  }
  </style>